import React, { Children, useEffect, useState  } from 'react';
import { Divider, Radio, Table, Modal, Tree, Input } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Viewicons } from 'view-ui';
import "./styles/index.less";
import type { DataNode, TreeProps } from 'antd/es/tree';

const { FormOutlined, UnorderedListOutlined, WindowsOutlined, CheckOutlined } = Viewicons;
export interface BaseViewTableProps {
    isOperate?: boolean;
    selectionType: "checkbox" | "radio"
}

export interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}

const columns: ColumnsType<DataType> = [
    {
        title: 'Name',
        dataIndex: 'name',
        render: (text: string) => <a>{text}</a>,
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];
  
const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
    },
    {
        key: '4',
        name: 'Disabled User',
        age: 99,
        address: 'Sydney No. 1 Lake Park',
    },
];

// rowSelection object indicates the need for row selection
const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: DataType) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
};

const onDragEnter = () => {}

const onDrop = () => {}

const ViewTable: React.FC<BaseViewTableProps> = (props) => {
    const { isOperate } = props;
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const [ isModalOpen, setIsModalOpen ] = useState<boolean>(false);
    const [ expandedKeys ] = useState([]);
    const handleOk = () => {}
    const columnsList = (flag: boolean) => {
        let list: any[] = [{ title: 'ColumnsTree', key: "0-1", children: []}];
        list[0].children = columns.map((k, idx) => ({ ...k, key: `0-1-${idx}`, title: () => (
             <div>
                { flag ? <span>{k.title as string}</span> : <Input defaultValue={k.title as string} style={{ width: "150px", marginRight: "10px" }} />}
                { flag ? <FormOutlined className='edit-icon' style={{ margin: "0 10px" }} onClick={() => handleClick(k, false)}/> : <CheckOutlined className='edit-icon' onClick={() => handleClick(k, true)}/> }
            </div>
        ), children: [] }));
        return list;
    }

    const [ gData, setGData ] = useState(columnsList(true));

    const handleClick = (k: any, flag: boolean) => { setGData(columnsList(false)); };

    return (
        <div>
            <Radio.Group
                onChange={({ target: { value } }) => setSelectionType(value) }
                value={selectionType}
            >
                <Radio value="checkbox">Checkbox</Radio>
                <Radio value="radio">radio</Radio>
            </Radio.Group>

            <Divider />
            
            <div>
                <div className='edit'>
                    <UnorderedListOutlined className='edit-icon' onClick={() => setIsModalOpen(true)}/>
                    <WindowsOutlined className='edit-icon'/>   
                </div>   
                <Table
                    rowSelection={{ type: selectionType, ...rowSelection }}
                    columns={columns}
                    dataSource={data}
                />
                <Modal 
                    title="编辑信息" 
                    open={isModalOpen} 
                    onOk={handleOk} 
                    onCancel={() => setIsModalOpen(false)}
                >
                    <Tree
                        className="draggable-tree"
                        defaultExpandedKeys={expandedKeys}
                        draggable
                        blockNode
                        onDragEnter={onDragEnter}
                        onDrop={onDrop}
                        treeData={gData}
                    />
                </Modal>
            </div>
        </div>
    )
}

export default ViewTable;